<template>
  <div class="bigBox">
    <div class="box">
      <div class="header">
        <div class="header1">编辑课程</div>
        <div class="header2" @click="returnT">
          <span class="iconfont icon-w_fanhui"></span>返回
        </div>
      </div>
      <div class="content">
        <div class="contentH">请填写密码信息</div>
        <div class="contentC">
          <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            label-width="120px"
            class="demo-ruleForm"
            :size="formSize"
            status-icon
          >
            <el-form-item label="员工姓名:" prop="ruleForm.ename">
              <el-input
                disabled
                style="width: 185px"
                v-model="ruleForm.ename"
                placeholder="请输入员工姓名:"
              />
            </el-form-item>
            <el-form-item label="工号:" prop="ruleForm.empno">
              <el-input
                disabled
                style="width: 185px"
                v-model="ruleForm.empno"
              />
            </el-form-item>
            <el-form-item label="原密码:" prop="ruleForm.pwd">
              <el-input disabled style="width: 275px" v-model="ruleForm.pwd" />
            </el-form-item>
            <el-form-item label="新密码:" prop="ruleForm.newPwd1">
              <el-input
                style="width: 275px"
                v-model="ruleForm.newPwd1"
                placeholder="请输入6位以上密码，英文或数字"
              />
            </el-form-item>
            <el-form-item label="确认新密码:" prop="ruleForm.newPwd2">
              <el-input
                style="width: 275px"
                v-model="ruleForm.newPwd2"
                placeholder="请再输入一次密码"
              />
            </el-form-item>

            <el-form-item>
              <el-button
                class="save-btn"
                type="primary"
                @click="submitForm(ruleFormRef)"
              >
                <img
                  style="width: 16px; height: 16px"
                  src="https://cimg.axureshop.com/54/a3/eb/54a3eb5671b341c7812aa0667a94e529/images/%E6%96%B0%E5%A2%9E%E8%BD%AE%E6%92%AD%E5%9B%BE/u710.png"
                  alt=""
                />
                <span style="margin-left: 5px">保存</span>
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { routerKey, useRouter } from 'vue-router'
import { reactive, onMounted, ref } from 'vue'
import axios from '../utils/http'
import { Delete, Download, Plus, ZoomIn, Coin } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
import type { FormInstance, FormRules, UploadFile } from 'element-plus'
import {
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElCol,
  ElDatePicker,
  ElSwitch,
} from 'element-plus'

let total = ref()
let limit = ref(2)
let page = ref(1)
//表单数据
const ruleForm = ref({
  ename: '',
  empno: '',
  pwd: '',
  newPwd1: '',
  newPwd2: '',
})

// 正则
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()

// 正则
const rules = ref<FormRules>({
  ename: [{ required: true, message: '员工姓名', trigger: 'blur' }],
  url: [{ required: true, message: '请上传课程图片', trigger: 'blur' }],
  updatetime: [
    {
      type: 'date',
      required: true,
      message: '请选择一个时间',
      trigger: 'change',
    },
  ],
})

// 正则
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
// 正则
const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}))

// 上传
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const disabled = ref(false)
// 上传
const handleRemove = (file: UploadFile) => {
  console.log(file)
}
// 上传
const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!
  dialogVisible.value = true
}
// 上传
const handleDownload = (file: UploadFile) => {
  console.log(file)
}

//返回按钮跳转
const router = useRouter()
const returnT = function () {
  router.push({
    name: 'courseManagement',
  })
}
//通过id查询数据
const route = useRoute()
//params
const userId = route.query
let getData = function () {
  axios({
    url: '/course/pre',
    method: 'get',
    params: {
      page: page.value,
      limit: limit.value,
      id: userId.id,
    },
  }).then(({ data }) => {
    console.log(data)
    if (data.code == 0) {
      ruleForm.value = data.data
      //console.log(tableData)

      total.value = data.data.totalCount
      //console.log(total.value)
    }
  })
}
// 保存编辑并赋值
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log(ruleForm)

      axios({
        url: '/course/update',
        method: 'post',
        data: ruleForm.value,
      }).then(({ data }) => {
        console.log(data)
        if (data.code == 0) {
          getData()
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}
//挂载后
onMounted(() => {
  getData()
  console.log(ruleForm, '111')
})
</script>
<script></script>
<style lang="less" scoped>
@import url('../assets/J-iconfont/iconfont.css');
* {
  margin: 0;
  padding: 0;
}
.bigBox {
  display: flex;
  justify-content: center;
  background-color: #fcfcfc;
  .box {
    width: 1100px;
    margin: 0 127px;
    // border: 1px solid aqua;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    .header {
      margin-top: 25px;
      margin-bottom: 25px;
      width: 1100px;
      display: flex;
      justify-content: space-between;
      .header1 {
        font-size: 24px;
        color: #9037f3;
        font-weight: 700;
      }
      .header2 {
        width: 80px;
        height: 34px;
        border: 1px solid #9037f3;
        border-radius: 3px;
        color: #9037f3;
        text-align: center;
        line-height: 34px;
        span {
          margin-right: 5px;
        }
      }
    }
    .content {
      width: 1038px;
      background-color: #ffffff;
      border: 1px solid #e4e4e4;
      padding: 0 30px 100px 30px;
      .contentH {
        width: 100%;
        height: 48px;
        color: #999999;
        font-size: 14px;
        line-height: 48px;
        border-bottom: 1px solid #e4e4e4;
        margin-bottom: 35px;
      }
    }
  }
}
</style>
<style>
.el-input__wrapper {
  width: 162px;
  height: 35px;
}
.el-form-item,
.el-form-item--default,
.is-required asterisk-left,
.el-form-item--feedback {
  margin-bottom: 40px;
}
.el-form-item__content {
  text-align: center;
  display: flex;
}

.save-btn {
  width: 98px;
  height: 36px;
  background-color: #9037f3;
  border: none;
  margin-left: 350px;
}
.cancel-btn {
  width: 98px;
  height: 36px;
  background-color: #e4e4e4;
  border: none;
  margin-left: 35px;
  color: #999999;
}
.el-upload--picture-card {
  width: 73px;
  height: 70px;
}
</style>
